import React, { Component } from "react";
import { connect } from "react-redux"
import { actionCreators } from "../store";
import {ListInfo, ListItem, LoadMore} from "../style"
import {Link} from "react-router-dom"
class List extends Component {

    render() {
        const {list, page, gethandleMore} = this.props;
        return <div>
            {list.map((item) => {
                return (
                    <Link  key={item.get("id")} to="/detail">
                <ListItem>
                    <img className="pic" src={item.get("imgUrl")} alt="" />
                    <ListInfo>
                        <h3 className="titile">{item.get("title")}</h3>
                        <p className="desc">{item.get("desc")}</p>
                    </ListInfo>
                </ListItem>
                    </Link>
                )
            })}
            <LoadMore onClick={() => {
                gethandleMore(page);
            }}>阅读更多</LoadMore>
        </div>;
    }
}
const mapStateToProps = (state) => {
    return {
        list: state.getIn(["home", "articleList"]),
        page:state.getIn(["home", "articlePage"])
    }
}
const mapDispatchProps = (dispatch) => {
    return {
        gethandleMore(page){
            dispatch(actionCreators.getMoreList(page));
        }
    }
}
export default connect(mapStateToProps, mapDispatchProps, null)(List);